<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="fragment/head"/>
    <link href="resources/assets/global/font-awesome/css/all.css" rel="stylesheet">
    <!-- BEGIN Page level plugins -->
    <link href="resources/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css"
          rel="stylesheet"/>
    <link href="resources/assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
</head>

<body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-content-white page-sidebar-closed">
<th:block th:with="
    ERPConstants = ${T(com.sh.caryr.erp.util.ERPConstants)} ,
    authTarget = ${ERPConstants.AUTH_TARGET_TRADE} ,
    createAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_CREATE},
    deleteAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_DELETE},
    updateAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_UPDATE},
    exportAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_EXPORT},
    importAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_IMPORT},
    submitAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_SUBMIT},
    packingAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_PACKING},
    deliverAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_DELIVER},
    signoffAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_SIGNOFF},
    settleAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_SETTLE},
    closeAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_CLOSE}
">
    <!--======== Header fragment ========-->
    <th:block th:replace="fragment/header"/>
    <div class="page-container">
        <!--======== Sidebar fragment ========-->
        <th:block th:replace="fragment/sidebar"/>
        <div class="page-content-wrapper">
            <div class="page-content">
                <!-- BEGIN PAGE BAR -->
                <div class="page-bar">
                    <ul class="page-breadcrumb">
                        <li><a href="dashboard.html" class='msg_home'>控制台</a><i class="fa fa-circle"></i></li>
                        <li>
                            <span class='msg_order_detail'>订单信息</span>
                            <span th:text="${orderId} == -1?'':${orderId} " class=""></span>
                        </li>
                    </ul>
                </div>
                <div class="row">
                    <!--=========== Page level content=============-->
                    <div class="col-md-12">
                        <!-- Page header: Guide -->
                        <th:block th:replace="order/fragements/instructions"/>
                        <!-- Page header: Error Message -->
                        <div class="alert alert-danger hidden" id="form_error_msg">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
                            <strong class="msg_err_title"></strong>
                            <span class="msg_err_subTitle"> </span>
                        </div>
                        <!-- Page body -->
                        <div class="portlet box green">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fas fa-file-text"></i>订单信息
                                    <span th:text="${orderId} == -1?'':${orderId} " class=""></span>
                                </div>
                                <div class="tools"></div>
                            </div>
                            <div class="portlet-body">
                                <form class="form-horizontal" role="form" id='order_edit_form' action='api/order'
                                      method='post'>
                                    <div class="form-actions" style="margin-bottom: 30px;">
                                        <div class="row text-right">
                                            <div class="col-md-12">
                                                <button type="button"
                                                        class="btn btn-warning msg_com_formSaveAndNew form_save_and_new hidden"></button>
                                                <div th:if="${ session.isSuperUser||session.authStr.contains(submitAuth)||
                                                            session.isSuperUser||session.authStr.contains(packingAuth)||
                                                            session.isSuperUser||session.authStr.contains(deliverAuth)||
                                                            session.isSuperUser||session.authStr.contains(signoffAuth)||
                                                            session.isSuperUser||session.authStr.contains(settleAuth)||
                                                            session.isSuperUser||session.authStr.contains(closeAuth)}"
                                                     class="btn-group change_button_status">
                                                    <button class="btn blue dropdown-toggle msg_btn_trade_change_std"
                                                            type="button" data-toggle="dropdown"
                                                            aria-expanded="false"> Dropdown
                                                        <i class="fa fa-angle-down"></i>
                                                    </button>
                                                    <th:block th:replace="order/fragements/orderActions"/>
                                                </div>
                                                <button type="button"
                                                        class="btn green msg_com_formSave form_save hidden"></button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-body edit_data">
                                        <input class="hidden" name='id' id='input_edit_form_id'>
                                        <input class="hidden" name='status'>
                                        <div class="col-md-6 ">
                                            <!-- ========detail section 1======== -->
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <span class="caption-subject font-green sbold">收件人信息</span>
                                                    </div>
                                                </div>
                                                <div class="portlet-body form">
                                                    <div role="form">
                                                        <div class="form-body row">
                                                            <div class="form-group col-md-6">
                                                                <label class="font-red bold">姓名</label>
                                                                <div class="input-icon">
                                                                    <i class="fas fa-user font-red "></i>
                                                                    <input type="text" class="form-control"
                                                                           placeholder="姓名" name='receiver'
                                                                           maxlength="20"></div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label class="font-red bold">手机号码</label>
                                                                <div class="input-icon">
                                                                    <i class="fas fa-mobile-alt font-red "></i>
                                                                    <input type="text" class="form-control"
                                                                           name='phoneNum'
                                                                           maxlength="20"
                                                                           placeholder="手机号码">
                                                                </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>座机号码</label>
                                                                <input type="text" class="form-control"
                                                                       name='fixedPhoneNum'
                                                                       maxlength="20"
                                                                       placeholder="座机号码">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>邮编</label>
                                                                <input type="text" class="form-control" name='postCode'
                                                                       maxlength="10" placeholder="邮编">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>昵称</label>
                                                                <input type="text" class="form-control" name='nickName'
                                                                       maxlength="20" placeholder="昵称">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label class="font-red bold">收货地址</label>
                                                                <textarea class="form-control" rows="3" name='address'
                                                                          maxlength="100"></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- ========detail section 2======== -->
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <span class="caption-subject font-green sbold">快递信息</span>
                                                    </div>
                                                </div>
                                                <div class="portlet-body form">
                                                    <div role="form">
                                                        <div class="form-body row">
                                                            <div class="form-group col-md-6">
                                                                <label class="font-red bold">
                                                                    快递公司
                                                                </label>
                                                                <div class="">
                                                                    <select class="form-control sel_expressName"
                                                                            name="logisticsName"> </select>
                                                                </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label class="font-red bold">快递单号</label>
                                                                <div class="input-icon">
                                                                    <i class="fas fa-shipping-fast font-red"></i>
                                                                    <input type="text" class="form-control"
                                                                           placeholder="快递单号" name='logisticsOrderId'
                                                                           maxlength="30"></div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>快递类型</label>
                                                                <div class="mt-radio-inline">
                                                                    <label class="mt-radio">
                                                                        <input type="radio" name="logisticsType"
                                                                               value="0" checked="">快递
                                                                        <span></span>
                                                                    </label>
                                                                    <label class="mt-radio">
                                                                        <input type="radio" name="logisticsType"
                                                                               value="1">物流
                                                                        <span></span>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>发货时间</label>
                                                                <input type="text" class="form-control"
                                                                       name="sendOutTime" placeholder="发货时间"
                                                                       readonly="">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label class="msg_ent_fld_invoiceType"></label>
                                                                <div class="mt-radio-inline">
                                                                    <label class="mt-radio active">
                                                                        <input type="radio" name="invoiceType"
                                                                               value="0"/>
                                                                        <i class="radio-label">电子</i>
                                                                        <span></span>
                                                                    </label>
                                                                    <label class="mt-radio">
                                                                        <input type="radio" name="invoiceType"
                                                                               value="1"/>
                                                                        <i class="radio-label">纸质</i>
                                                                        <span></span>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>加急</label>
                                                                <div class="mt-radio-inline">
                                                                    <label class="mt-radio active">
                                                                        <input type="radio" name="isUrgent"
                                                                               value="0"
                                                                               checked="checked">
                                                                        <i class="radio-label">否</i>
                                                                        <span></span>
                                                                    </label>
                                                                    <label class="mt-radio">
                                                                        <input type="radio" name="isUrgent"
                                                                               value="1">
                                                                        <i class="radio-label">是</i>
                                                                        <span></span>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label class='msg_ent_fld_invoiceInfo'></label>
                                                                <textarea class='form-control' name='invoiceInfo'
                                                                          maxlength="100" rows="3"></textarea>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>客户备注</label>
                                                                <textarea class='form-control' name='customRemark'
                                                                          maxlength="100" rows="3"></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 ">
                                            <!-- ========detail section 3======== -->
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <span class="caption-subject font-green sbold">系统信息</span>
                                                    </div>
                                                </div>
                                                <div class="portlet-body form">
                                                    <div role="form">
                                                        <div class="form-body row">
                                                            <div class="form-group col-md-6">
                                                                <label>系统单号</label>
                                                                <input type="text" class="form-control"
                                                                       placeholder="系统单号" readonly="" name="id">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>订单状态</label>
                                                                <input type="text" class="form-control"
                                                                       placeholder="订单状态" readonly="" name="statusTxt">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>创建日期</label>
                                                                <input type="text" class="form-control"
                                                                       placeholder="创建日期" readonly="" name="createAt">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>订单类型</label>
                                                                <div class="mt-radio-inline">
                                                                    <label class="mt-radio">
                                                                        <input type="radio" name="orderType" value="0">
                                                                        普通
                                                                        <span></span>
                                                                    </label>
                                                                    <label class="mt-radio">
                                                                        <input type="radio" name="orderType" value="1">合并
                                                                        <span></span>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>店铺</label>
                                                                <select class="form-control sel_shop"
                                                                        name="shopId"></select>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>电商平台</label>
                                                                <select class="form-control" name="extPlatform">
                                                                    <option></option>
                                                                    <option value="jingdong">京东</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>平台单号</label>
                                                                <div class="input-icon">
                                                                    <i class="fas fa-external-link-alt font-green"></i>
                                                                    <input type="text" class="form-control"
                                                                           placeholder="平台单号" name='extTxnId'>
                                                                </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>重量</label>
                                                                <input type="text" class="form-control" placeholder="kg"
                                                                       name='weight' maxlength="10">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>系统备注</label>
                                                                <textarea class="form-control" rows="3"
                                                                          name='systemRemark'
                                                                          maxlength="100"></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- ========detail section 4======== -->
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <span class="caption-subject font-green sbold">财务信息</span>
                                                    </div>
                                                </div>
                                                <div class="portlet-body form">
                                                    <div role="form">
                                                        <div class="form-body row">
                                                            <div class="form-group col-md-6">
                                                                <label>订单金额</label>
                                                                <div class="input-icon">
                                                                    <i class="fas fa-yen-sign font-green "></i>
                                                                    <input type="text" class="form-control"
                                                                           name='orderAmount' maxlength="10"
                                                                           placeholder="元" readonly=""></div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>实付金额</label>
                                                                <div class="input-icon">
                                                                    <i class="fas fa-yen-sign font-green "></i>
                                                                    <input type="text" class="form-control"
                                                                           name='paymentAmount' maxlength="10"
                                                                           placeholder="元"></div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>实收金额</label>
                                                                <div class="input-icon">
                                                                    <i class="fas fa-yen-sign font-green "></i>
                                                                    <input type="text" class="form-control"
                                                                           name='receiveAmount' maxlength="10"
                                                                           placeholder="元"></div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>运费</label>
                                                                <div class="input-icon">
                                                                    <i class="fas fa-yen-sign font-green "></i>
                                                                    <input type="text" class="form-control"
                                                                           name='logisticsAmount' maxlength="10"
                                                                           placeholder="元"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--============= Product list =============-->
                                    <div class="col-lg-12 col-xs-12 col-sm-12">
                                        <div class="portlet light bordered tasks-widget " id="order_item_list">
                                            <input class="hidden" name="tradeType">
                                            <div class="portlet-title">
                                                <div class="caption">
                                                    <span class="caption-subject font-green sbold">产品清单</span>
                                                </div>
                                                <div class="actions">
                                                    <a href="javascript:;"
                                                       class="add_task btn btn-circle btn-icon-only btn-default border-green">
                                                        <i class="fa fa-plus font-green"></i>
                                                    </a>
                                                    <a href="javascript:;"
                                                       class="delete_task_all btn btn-circle btn-icon-only btn-default border-red">
                                                        <i class="fa fa-minus font-red"></i>
                                                    </a>
                                                    <a class="btn btn-circle btn-icon-only btn-default fullscreen"
                                                       href="javascript:;" data-original-title="" title=""> </a>
                                                </div>
                                            </div>
                                            <div class="portlet-body">
                                                <div class="task-content">
                                                    <div>
                                                        <!-- START TASK LIST -->
                                                        <ul class="task-list">
                                                            <li class="list-header">
                                                                <div class="task-checkbox">
                                                                    <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                                                        <input type="checkbox"
                                                                               class="checkboxes select_item"
                                                                               value="1">
                                                                        <span></span>
                                                                    </label>
                                                                </div>
                                                                <div class="task-title row">
                                                                    <div class="row">
                                                                        <div class="col-md-2">
                                                                            <span class="col-md-3 "> 图片 </span>
                                                                            <span class="col-md-9"> 产品类型 </span>
                                                                        </div>
                                                                        <div class="col-md-8">
                                                                            <span class="col-md-8 "> 产品名称 </span>
                                                                            <span class="col-md-3 "> 数量 </span>
                                                                        </div>
                                                                        <div class="col-md-1 text-right">
                                                                             操作
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                            <li class="tempalte hidden ">
                                                                <input class="hidden" name="id">
                                                                <span class="hidden hiddenModel"></span>
                                                                <div class="task-checkbox">
                                                                    <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                                                        <input type="checkbox"
                                                                               class="checkboxes select_item"
                                                                               value="1">
                                                                        <span></span>
                                                                    </label>
                                                                </div>
                                                                <div class="task-value row">
                                                                    <div class="col-md-2">
                                                                        <div class="col-md-3">
                                                                            <a href="images/empty-product-img.png"
                                                                               class="fancybox-button"
                                                                               data-rel="fancybox-button">
                                                                                <img class="dt-img img-responsive"
                                                                                     src='images/empty-product-img.png'>
                                                                            </a>
                                                                        </div>
                                                                        <div class='col-md-9 col-sm-6 col-xs-12 has-success form-group '>
                                                                            <select class="form-control"
                                                                                    name="productType">
                                                                                <option value="0" selected>
                                                                                    单品
                                                                                </option>
                                                                                <option value="1">套件
                                                                                </option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                        <div class="col-md-8">
                                                                            <select class=" form-control sel_productSpecSet"
                                                                                    name="productSpecId"></select>
                                                                        </div>
                                                                        <div class="input-wrap col-md-3">
                                                                            <input type="number" value="1"
                                                                                   maxlength="10"
                                                                                   class="form-control"
                                                                                   name="productSpecAmount">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-1 text-right">
                                                                        <div class="mt-action-buttons ">
                                                                            <a href="javascript:;"
                                                                               class="delete_task btn btn-circle btn-sm btn-icon-only btn-default border-red"
                                                                               style="width:27px;height:27px;"
                                                                               title="删除">
                                                                                <i class="fa fa-minus font-red"></i>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                        <!-- END START TASK LIST -->
                                                    </div>
                                                </div>
                                                <div class="task-footer">&nbsp;</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <div class="row text-right">
                                            <div class="col-md-12">
                                                <button type="button"
                                                        class="btn btn-warning msg_com_formSaveAndNew form_save_and_new"></button>
                                                <div th:if="${ session.isSuperUser||session.authStr.contains(submitAuth)||
                                                    session.isSuperUser||session.authStr.contains(packingAuth)||
                                                    session.isSuperUser||session.authStr.contains(deliverAuth)||
                                                    session.isSuperUser||session.authStr.contains(signoffAuth)||
                                                    session.isSuperUser||session.authStr.contains(settleAuth)||
                                                    session.isSuperUser||session.authStr.contains(closeAuth)}"
                                                     class="btn-group dropup change_button_status">
                                                    <button class="btn blue dropdown-toggle msg_btn_trade_change_std"
                                                            type="button" data-toggle="dropdown"
                                                            aria-expanded="false"> Dropdown
                                                        <i class="fa fa-angle-up"></i>
                                                    </button>
                                                    <th:block th:replace="order/fragements/orderActions"/>
                                                </div>
                                                <button type="button" class="btn green msg_com_formSave form_save"></button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!--=========== END Page level content============= -->
                </div>
            </div>
        </div>
    </div>

    <th:block th:replace="fragment/rear"/>
    <!-- BEGIN Page level plugins -->
    <script src="resources/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="resources/assets/global/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
    <script src="resources/assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
</th:block>
<script th:inline="javascript">
    jQuery(document).ready(function () {

        var createAuth = false, updateAuth = false, disableModify = false, orderId = -1;
        /*[+
        caryr.lang = [[${session.lang}]];
        createAuth = ('true'==[[${session.isSuperUser||session.authStr.contains(createAuth)?'true':'false'}]]);
        updateAuth = ('true'==[[${session.isSuperUser||session.authStr.contains(updateAuth)?'true':'false'}]]);
        disableModify = ('true'==[[${session.isSuperUser||session.authStr.contains(updateAuth)?'false':'true'}]]);
        orderId = '[[${orderId}]]';
        +]*/

        caryr.loadI18n();
        var formId = '#order_edit_form';
        $('.date-picker').datepicker({autoclose: true});
        /************ ProductSpec list Portlet ************/
        var orderItemTaskPortlet = caryr.createTaskPortlet({
            disabled: disableModify,
            portlet: $('#order_item_list'),
            onAddTaskItem: function (entity, newLi) {
                toggleProductType(newLi, entity.productType, entity);
                newLi.find('select[name="productType"]').on('change', function (e) {
                    var productType = $(this).val();
                    toggleProductType(newLi, productType);
                });

                //*** Set Product Specification Img
                var proSpec = caryr.utils.findFromList(ProSpecSingleList,'id',entity.productSpecId);
                if(proSpec){
                    caryr.utils.findFromList(ProSpecSetList,'id',entity.productSpecId);
                }
                var img = proSpec&&proSpec.img ? proSpec.img : "images/empty-product-img.png";
                newLi.find('a.fancybox-button').attr('href', img);
                newLi.find('a.fancybox-button img').attr('src', img);
            }
        });
        /***************** Edit form **************/
        var orderForm = caryr.getFormInstatnce('order_edit_form', {
            disabled: disableModify,
            url: 'api/order',
            validateForm: function (formResult, form) {
                var result = formResult;
                if (!formResult) {
                    return false;
                }
                //Check tradeOrders
                var tradeOrders = orderItemTaskPortlet.collectData();
                var errorSubTitle = 'msg_form_err_no_tradeOrder';
                if (!tradeOrders || tradeOrders.length == 0) {
                    result = false;
                }

                //Check required field according to order status
                if (result) {
                    var orderStatus = form.find('input[name="status"]').val();
                    var selector = 'input[name="receiver"],' +
                        'input[name="phoneNum"],' +
                        'select[name="expressName"],' +
                        'input[name="expressOrderId"],' +
                        'textarea[name="address"]';
                    if (orderStatus >= 80) {
                        form.find(selector).each(function (i, e) {
                            if (result) {
                                var value = $(e).val();
                                if (!value || value.trim() == "") {
                                    result = false;
                                    errorSubTitle = 'msg_form_err_detail';
                                    $(e).focus();
                                }
                            }
                        });
                    }
                }

                if (result) {
                    caryr.toggleErrorMessage({show: false});
                } else {
                    caryr.toggleErrorMessage({
                        show: true,
                        title: 'msg_form_err',
                        subTitle: errorSubTitle
                    });
                    caryr.showTab('#tab_li_prodcut_dimension');
                    return result;
                }
                return true;
            },
            afterSaveSuccess: function (data, action) {
                var id = action == "POST" ? data.data : data.data.id;
                if (id) {
                    this.form.find('.edit_data input[name="id"]').val(id);
                    window.location.href = "orderDetails?orderId=" + id;
                } else {
                    swal({
                        title: $.i18n.prop("msg_com_systemError"),
                        text: "",
                        type: "error"
                    });
                }
            },
            afterSaveAndNewSuccess: function (data, action) {
                caryr.refreshEditForm({}, true, formId);
                orderItemTaskPortlet.clear();
            },
            afterCollectEntityData: function (entity) {
                if (entity.expressName == "0") {
                    delete entity.expressName;
                }
                //Collect TradeOrders
                var tradeOrderList = orderItemTaskPortlet.collectData();
                for (var i = 0; i < tradeOrderList.length; i++) {
                    for (var property in entity) {
                        if (property != 'id') {
                            tradeOrderList[i][property] = entity[property];
                        }
                    }
                    if (tradeOrderList[i].productType == "1") {
                        tradeOrderList[i].skuId = tradeOrderList[i].productSpecId;
                    }
                }
                entity.tradeOrderList = tradeOrderList;
            }
        });

        //attach change status buttons
        $('.change_button_status ul.dropdown-menu li a').on('click', function () {
            var nextStatus = $(this).attr('data-next-status');
            orderForm.form.find('.edit_data input[name="status"]').val(nextStatus);
            orderForm.submitFormData();
        });
        /************ Ajax load data ***/
        var ProSpecSingleList, ProSpecSetList, ExpressCompanies, order = {};
        caryr.loadData({ //Synchronized load: ProSpecSingleList.
            async: false,
            url: 'api/productSpec',
            callback: function (data) {
                ProSpecSetList = new Array();
                ProSpecSingleList = new Array();
                if (data && data.data) {
                    for (var i = 0; i < data.data.length; i++) {
                        var spec = data.data[i];
                        if (spec.type == "0") {
                            ProSpecSingleList.push(spec);
                        } else if (spec.type == "1") {
                            ProSpecSetList.push(spec);
                        }
                    }
                    refreshSelect($('select[name="productSpecId"]'), ProSpecSingleList);
                }
            }
        });
        caryr.loadData({
            async: false, //Synchronized load: order Details
            url: 'api/order/' + orderId,
            callback: function (data) {
                order = data && data.data ? data && data.data : {};
                caryr.updateEntity($(formId + ' .edit_data'), order); //edit_data is required to avoid name conflict.
                orderItemTaskPortlet.refreshData(order.tradeOrderList);
                refreshFormButtons(order);
                refreshFormInput(orderForm, orderItemTaskPortlet, order);
                //Extra Update for Order status description
                if (order.status) {
                    $('input[name="statusTxt"]').val($.i18n.prop("msg_order_std_" + order.status));
                }
            },
            error: function (response) {
                if (response.responseJSON && response.responseJSON.msgCode == caryr.msgCode.ENTITY_NOT_FOUND) {
                    window.location.href = "error_not_found"
                }
            }
        });

        caryr.loadData({
            async: true,
            url: 'api/shop',
            replace: true,
            elements: [$('.sel_shop')],
            descriptionField: 'shopName',
            defaultValue: order.shopId,
            callback: function (response, element, option) {
                caryr.select.refreshOptions(response.data, element, option);
            }
        });

        caryr.loadData({
            async: true,
            replace: true,
            elements: [$('.sel_expressName')],
            url: 'api/util/expressComp',
            defaultValue: order.logisticsName,
            formatter: function (data) {
                return '<option value="' + data.code + '">' + data.name + '</option>';
            },
            callback: function (response, element, option) {
                if (response && response.data) {
                    caryr.select.refreshOptions(response.data, element, option);
                    ExpressCompanies = {};
                    for (var i = 0; i < response.data.length; i++) {
                        var expressComp = response.data[i];
                        ExpressCompanies[expressComp.code] = expressComp.name;
                    }
                }
            }
        });

        /***************** Functions **************/
        function refreshSelect(select, datalist) {
            caryr.select.refreshOptions(datalist, [select], {
                replace: true,
                excludeEmpty:true,
                formatter: function (data) {
                    var code = data.code ? data.code : "";
                    return '<option value="' + data.id + '">' + data.name + '  (' + code + ')</option>';
                }
            });
        }

        //Toggle single product specification or product specification sets.
        function toggleProductType(taskItem, productType, entity) {
            var productSpecId = entity && entity.productSpecId ? entity.productSpecId : "";
            if (productType == 0) {
                refreshSelect(taskItem.find('select[name="productSpecId"]'), ProSpecSingleList);
                taskItem.find('select[name="productSpecId"]').val(productSpecId);
            } else if (productType == 1) {
                refreshSelect(taskItem.find('select[name="productSpecId"]'), ProSpecSetList);
                taskItem.find('select[name="productSpecId"]').val(productSpecId);
            }
        }

        function refreshFormInput(orderForm, taskPortlet, data) {
            var selector = 'input[name="receiver"],' +
                'input[name="phoneNum"],' +
                'select[name="expressName"],' +
                'input[name="expressOrderId"],' +
                'textarea[name="address"]';

            var disableEdit = (!data.id && !createAuth) ||     // No createAuth
                (data.id && !updateAuth) ||                    // No Update
                (data && data.extPlatform) ||                  // External Order
                (data && data.status == "100");                // Finished Order
            if (disableEdit) {  //Finished order
                orderForm.editable(false);
                $('button.form_save').addClass('hidden');
            } else {
                orderForm.editable(true);
                $('button.form_save').removeClass('hidden');
            }

            if (disableEdit || (data && data.status >= "80")) {
                taskPortlet.editable(false);
                orderForm.form.find(selector).each(function (i, e) {
                    $(e).prop("disabled", true);
                });
            } else {
                taskPortlet.editable(true);
                orderForm.form.find(selector).each(function (i, e) {
                    $(e).prop("disabled", false);
                });
            }
        }

        function refreshFormButtons(entity) {
            if (!entity.id) {  //If create an entity
                $('.form_save_and_new').removeClass('hidden');
                $('.change_button_status').addClass('hidden');
            } else {
                // External Order should not be editable
                if (entity.extPlatform != null && entity.extPlatform != "") {
                    $('.form_save_and_new').addClass('hidden');
                    $('.change_button_status').addClass('hidden');
                } else if (entity.status != 100) {
                    $('.change_button_status').removeClass('hidden');
                } else {
                    $('.change_button_status').addClass('hidden');
                }
                $('.form_save_and_new').addClass('hidden');

                $('.change_button_status').find('ul.dropdown-menu li').each(function (i, e) {
                        var nextStatus = $(e).find('a').attr('data-next-status');
                        if (entity.status >= nextStatus) {
                            $(e).addClass('hidden');
                        } else {
                            $(e).removeClass('hidden');
                        }
                    }
                );
            }
        }

    });
</script>
</body>
</html>